<template>
    <view class="content">
        <van-popup  position="bottom" @click-overlay="closePopup" :show="showpopup" round z-index=1000
            custom-style="width: 100%;background:#ffffff;overflow: hidden; height:80%">
            <view class="popup-content">
                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <view class="popupTitle"> 该商品已下架 </view>
                        <!-- 关闭弹窗按钮 -->
                        <view>
                            <van-icon name="cross"  size="15" @click="closePopup" />
                        </view>
                    </view>
                    <!-- 实物商品内容 -->
                    <view class="goodsDetail">
                        <view class="goodsPic"> 
                            <img :src="ebStoreProduct.image" alt="" mode="widthFix">
                            <view class="xiajia_Biaoshi">已下架</view>
                        </view>
                        <view class="goodsText">
                            <view class="goods_T">{{ebStoreProduct.storeName}}</view>
                            <view class="goods_specs">选规格 <van-icon name="arrow-down" size="11"  style="margin-left: 7px;" /></view>
                            <view class="goods_price">¥{{ebStoreProduct.price}}</view>
                        </view>
                    </view>
                    <scroll-view :refresher-enabled="false"  style="height: 100vh; overflow: hidden;"  scroll-y :lower-threshold="80" show-scrollbar="false">
                        <view class="popupTitle t31"> 相似商品 </view>
                        <view class="goodsListBox">
                            <view class="similar_products" v-for="(itemL, indexL) in forYouList" :id="indexL"
                                :key="indexL" @click="toGoodsDetail(itemL, indexL)">
                                <view class="forYou_img"> <img :src="itemL.imgurl" alt="" mode="widthFix"> </view>
                                <view class="forYou_detail pl15">{{ itemL.detail }}</view>
                                <view class="forYou_title pl15">{{ itemL.title }}</view>
                                <view class="forYou_price pl15">{{ itemL.price }}</view>
                            </view>
                        </view>
                    </scroll-view>
                    <van-toast id="van-toast" />
                </view>

            </view>
        </van-popup>
    </view>
</template>
<script>
import Toast from '@/wxcomponents/vant/toast/toast'
// import { remove } from '@vue/shared';
export default {
    props: {
        showpopup: {
            type: Boolean,
            default: () => false
        },
        roleName: {
            type: String,
            default: () => ''
        },
        buttonStatus:{
            type: Number,
            default: () => 0
        },
        ebStoreProduct:{
            type: Object,
            default: () => {}
        },
        goodsType:{
            type: String,
            default: () => ''
        }
    },
    data () {
        return {
            curTaste:0,
            curWeight:-1,
            date: '',
            show: true,
            title: 'Hello',
            option: {},
            url: '',
            stepperValue:1,
            forYouList: [ //热卖商品
              {
                // imgurl: require('../../static/shangcheng/goods.png'),
                imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/goods.png",
                detail: '美味好物限时抢购送好礼',
                title: '黄芪杞姜枣糕',
                price: '¥169'
              },
              {
                imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/goods.png",
                detail: '美味好物限时抢购送好礼',
                title: '黄芪杞姜枣糕',
                price: '¥169'
              },
              {
                imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/goods.png",
                detail: '美味好物限时抢购送好礼',
                title: '黄芪杞姜枣糕',
                price: '¥169'
              },
              {
                imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/goods.png",
                detail: '美味好物限时抢购送好礼',
                title: '黄芪杞姜枣糕',
                price: '¥169'
              },
              {
                imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/goods.png",
                detail: '美味好物限时抢购送好礼',
                title: '黄芪杞姜枣糕',
                price: '¥169'
              },
            ],
        }
    },
    onReady () {

    },
    methods: {
        // 关闭弹窗
        closePopup () {
            this.$emit('closeRemovePopup')
        },
        toGoodsDetail(item, val) {
          console.log(item, val, 'toGoodsDetail')
          const params={}
          params.biaozhi=remove
          uni.navigateTo({
            url:
              '/pages/shangcheng/goodsDetail?params=' +
              encodeURIComponent(JSON.stringify(params))
          })
        }
    }
}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

.popup-content{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height:100%;
    overflow: hidden;
    padding: 24px;
    border-radius: 16px;
}
// 滚动
.scroll-content {
    flex: 1;
    height:1px;
    // height: 100vh;
}
// 提示框
.popup-main{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // padding: 24px;
    // border-radius: 16px;
    // height: calc(100% - 24px);
    height: 100%;

    .popupTitle{
        // font-weight: bold;
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }
    .goodsDetail {
        display: flex;
        // align-items: center;
        width: 100%;
        margin-top: 26px;
        padding-bottom: 8px;
    }
    .goodsPic{
        position: relative;
        width: 30%;

        img{
            width: 100%;
            height: auto;
            // width: 111px; 
            // height: 111px;
        }
    }
    .xiajia_Biaoshi{
        position: absolute;
        // width: 59px;
        // height: 59px;  //屏幕太小时，写固定宽高  会移位
        // text-align: center;
        // line-height: 59px;
        width: 50%;
        height: 50%;   
        background: rgba(0, 0, 0, 0.4);
        // font-weight: bold;
        font-size: 14px;
        text-align: center;
        color: #FFFFFF ;

        display: flex;
        justify-content: center;
        align-items: center;
        left: 22%;
        top: 22%;
        border-radius: 50px;
    }

    .goodsText {
        position: relative;
        width: 70%;
        margin-left: 14px;
        // display: flex;
        // justify-content: space-between;
        // flex-direction: column;

        .goods_T {
            position: absolute;
            top: 7%;
            // font-weight: bold;
            font-size: 14px;
            text-align: left;
            color: #111111;
            line-height: 14px;
            // margin-top: 9px;  //display：flex   中 元素居中
            max-width: 60%;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }

        .goods_specs {
            position: absolute;
            top: 15%;
            // font-weight: bold;
            font-size: 12px;
            text-align: left;
            color: #666666;
            line-height: 12px;
            margin-top: 17px;

        }

        .goods_price {
            position: absolute;
            bottom: 7%;
            // font-weight: 900;
            font-weight: bolder;
            font-size: 16px;
            text-align: left;
            color: #666666;
            // margin-top: 40px;
            // margin-top: 20px;
            line-height: 16px;
        }
    }

    .goodsListBox {
        margin-top: 9px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        /* 允许Flex项目换行 */
    }

    .similar_products {
        // 缺少背景 边框 阴影
        // 盒子整体 距下一个10px、
        // margin-bottom: 10px;
        margin-bottom: 20px; 
        box-shadow: 1px 1px 5px 0 rgb(231, 231, 231, 0.29);
        background: #ffffff;
        width: 47%;

        .forYou_img {
            
            // height: 156px;
            // line-height: 156px;

            img {
                // width: 156px;
                // height: 156px;
                width: 100%;
                height: auto;
            }
        }

        .forYou_detail {
            max-width: 156px;
            white-space: pre-wrap;
            // font-weight: 400;
            font-size: 10px;
            line-height: 10px;
            text-align: left;
            color: #666666;
            margin-top: 13px;
        }

        .forYou_title {
            max-width: 156px;
            white-space: pre-wrap;
            // font-weight: bold;
            font-size: 13px;
            line-height: 13px;
            text-align: left;
            color: #111111;
            margin-top: 12px;
        }

        .forYou_price {
            // font-weight: 900;
            font-weight: bolder;
            line-height: 16px;
            font-size: 16px;
            text-align: left;
            color: #111111;
            margin-top: 11px;
            margin-bottom: 13px;
        }

    }


    // 加入购物车按钮
    .goodsAction {
        margin-top: 24px;
        width: calc(100% - 32px);
    }

}



.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
.t31{
    margin-top: 31px;
}
</style>

